﻿/*错误提示*/
#blazor-error-ui {
    background-color: transparent;
    box-shadow: none;
}

    #blazor-error-ui .background-card {
        width: calc(100%);
        height: calc(100%);
        position: fixed;
        background-color: rgba(0,0,0,.5);
        top: 0;
        left: 0;
    }

    #blazor-error-ui .main-card {
        background-color: var( --md-sys-color-error-container);
        color: var(--md-sys-color-on-error-container) !important;
        position: fixed;
        top: 50%;
        bottom: 50%;
        left: 50%;
        right: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 400px;
        border-radius: var( --md-card-border-radius);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        justify-content: space-between;
    }

    #blazor-error-ui .content-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
/*重连*/
.components-reconnect-show {
    height: 1rem;
    width: 1rem;
    background-color: var(--md-sys-color-on-background);
    position: fixed;
    top: 0;
    z-index: 200;
}
/*错误提示*/
#app-laoding {
    width: 100%;
    display: flex;
    position: fixed;
    height: 100%;
    justify-content: center;
    align-items: center;
}

    #app-laoding .main-card {
        width: 500px;
        border-radius: var( --md-card-border-radius);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        justify-content: space-between;
        max-width: 100%;
        gap: .5rem;
        height: min-content;
        margin: 1rem;
    }

    #app-laoding .content-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /*wasm加载进度条*/
    #app-laoding .loading-progress {
        position: relative;
        display: block;
        width: 6rem;
        height: 6rem;
    }

        #app-laoding .loading-progress circle {
            fill: none;
            stroke-width: 0.3rem;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
        }

            #app-laoding .loading-progress circle:last-child {
                stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
                transition: stroke-dasharray 0.05s ease-in-out;
            }

    #app-laoding .loading-progress-text {
        position: absolute;
        font-weight: bold;
    }

        #app-laoding .loading-progress-text:after {
            content: var(--blazor-load-percentage-text, "Loading");
        }

    #app-laoding .beian {
        position: fixed;
        bottom: 10px;
        left: 50%;
        right: 50%;
        width: max-content;
        padding: 0 1rem;
        border-radius: 10px;
        transform: translate(-50%,0);
    }

@media (prefers-color-scheme: light) or (prefers-color-scheme: no-preference) {
    #app-laoding .main-card, #app-laoding .beian {
        background-color: #ffd9de;
        color: #400014 !important;
    }

    .loading-progress circle {
        stroke: #ffffff;
    }

        .loading-progress circle:last-child {
            stroke: #bc004b;
        }

    .loading-progress-text {
        color: #bc004b;
    }

    #app-laoding {
        background-color: #fffbff;
    }
}

@media(prefers-color-scheme: dark) {
    #app-laoding .main-card, #app-laoding .beian {
        background-color: #900038;
        color: #ffd9de !important;
    }

    .loading-progress circle {
        stroke: #660025;
    }

        .loading-progress circle:last-child {
            stroke: #ffb2be;
        }

    .loading-progress-text {
        color: #ffb2be;
    }

    #app-laoding {
        background-color: #201a1b;
    }
}
